<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>nav1</title>
        <script src="../style/js/jquery.js"></script>
        <script src="../style/js/bt.dwz.js"></script>
        <script>
            //该页面不执行加载时等待效果
            //btd.loading = 0,此句代码不写，则默认 该页面执行加载时等待效果
            btd.loading = false;
        </script>
    </head>
    <body>
        <div class="span12"> 
            <div class="bs-docs-example">
                <div style="margin-bottom: 18px;" class="tabbable">
                  <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab1">Section 1</a></li>
                    <li class=""><a data-toggle="tab" href="#tab2">Section 2</a></li>
                    <li class=""><a data-toggle="tab" href="#tab3">Section 3</a></li>
                    <li class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li><a data-toggle="tab" href="#tab4">Action</a></li>
                          <li><a data-toggle="tab" href="#tab5">Another action</a></li>
                          <li><a data-toggle="tab" href="#tab6">Something else here</a></li>
                          <li class="divider"></li>
                          <li><a data-toggle="tab" href="#tab7">Separated link</a></li>
                        </ul>
                    </li>
                  </ul>
                  <div style="padding-bottom: 9px; border-bottom: 1px solid #ddd;" class="tab-content">
                    <div id="tab1" class="tab-pane active">
                      <p>I'm in Section 1.</p>
                    </div>
                    <div id="tab2" class="tab-pane">
                      <p>Howdy, I'm in Section 2.</p>
                    </div>
                    <div id="tab3" class="tab-pane">
                      <p>What up girl, this is Section 3.</p>
                    </div>
                    <div id="tab4" class="tab-pane">
                      <p> Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                    </div>
                    <div id="tab5" class="tab-pane">
                      <p>Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony.</p>
                    </div>
                    <div id="tab6" class="tab-pane">
                      <p> Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog.</p>
                    </div>
                    <div id="tab7" class="tab-pane">
                      <p>Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
                    </div>
                  </div>
               <!-- 为了让标签页可切换，需要在.tab-content中创建一个带有唯一ID的标识,data-toggle属性值为tab，href值标为应为显示的元素ID -->
                </div> 
            </div>

            <div class="bs-docs-example">
                <ul class="nav nav-pills">
                  <li class="active"><a data-toggle="tab" href="#tac1">首页</a></li>
                  <li><a data-toggle="tab" href="#tac2">Help</a></li>
                  <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a data-toggle="tab" href="#tac3">Action</a></li>
                      <li><a data-toggle="tab" href="#tac4">Another action</a></li>
                      <li><a data-toggle="tab" href="#tac5">Something else here</a></li>
                      <li class="divider"></li>
                      <li><a data-toggle="tab" href="#tac6">Separated link</a></li>
                    </ul>
                  </li>
                </ul>
                <div style="padding-bottom: 9px; border-bottom: 1px solid #ddd;" class="tab-content">
                    <div id="tac1" class="tab-pane active">
                      <p>I'm in Section 1.</p>
                    </div>
                    <div id="tac2" class="tab-pane">
                      <p>Howdy, I'm in Section 2.</p>
                    </div>
                    <div id="tac3" class="tab-pane">
                      <p>What up girl, this is Section 3.</p>
                    </div>
                    <div id="tac4" class="tab-pane">
                      <p> Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                    </div>
                    <div id="tac5" class="tab-pane">
                      <p>Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony.</p>
                    </div>
                    <div id="tac6" class="tab-pane">
                      <p> Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog.</p>
                    </div>
                  </div>
            </div>

            <div class="bs-docs-example">
                <div class="tabbable tabs-below">
                  <div class="tab-content">
                    <div id="A" class="tab-pane active">
                      <p>I'm in Section A.</p>
                    </div>
                    <div id="B" class="tab-pane">
                      <p>Howdy, I'm in Section B.</p>
                    </div>
                    <div id="C" class="tab-pane">
                      <p>What up girl, this is Section C.</p>
                    </div>
                  </div>
                  <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#A">Section 1</a></li>
                    <li class=""><a data-toggle="tab" href="#B">Section 2</a></li>
                    <li class=""><a data-toggle="tab" href="#C">Section 3</a></li>
                  </ul>
                </div> <!-- /tabbable -->
          </div>

        </div>
    </body>
</html>
